<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
        1.Vue中常用的按键别名：
            回车=>enter
            删除=>delete（捕获“删除”和“退格”键）
            退出 => esc
            空格=> space
            换行 =>tab
            上 =>up
            下 => down
            左=>left
            右=> right
            2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
            3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
            （1）.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
            （2）.配合keydown使用：正常触发事件。
            4.也可以使用keyCode去指定具体的按键（不推荐）
            5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
        -->
       <div id="root">
            <h1>tt</h1>
            <input type="text" placeholder="输入什么会触发" @keydown.ctrl="showinfo">
            <input type="text" placeholder="输入什么会触发" @keyup.enter="showinfo">
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        name:''
                    }
                },
                methods:{
                    showinfo(e){
                        console.log(e.target.value)
                    }
                }
            })
        </script>
    </body>
</html>
